<template>
<div>

<!--BEGIN HEADER-->
<div class="pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed head-menu">
    <a href="#" class="pure-menu-heading">
        <h3>物联网金融项目</h3>
    </a>
    <ul>
        <li class="pure-menu-selected"><a href="#">主页</a></li>
        <li><a href="#" @click="ManageChoose('PM')" v-show="info.UT_Name=='管理员'">项目管理</a></li>
        <li><a href="#" @click="ManageChoose('IM')">投资管理</a></li>
        <li><a href="#" @click="ManageChoose('UM')">用户信息显示</a></li>
        <li><a href="#">标签页</a></li>
    </ul>
    <div class="head-menu-info">
        欢迎您，{{ info.UT_Name }} <a href="#">{{ info.UL_Name }}</a>。您选择【首页】【退出】
    </div>
</div>
<!--END HEADER-->
<div class="pure-g content">
    <div class="pure-u-1">
        <div class="main">
            <div class="panel panel-default">
                <div class="panel-body" v-show="InvestManage">
                    <ShowInvestInfo></ShowInvestInfo>
                </div>

                <div class="panel-body" v-show="UserInvest&&info.UT_Name=='普通用户'">
                    <ShowUserInvestInfo></ShowUserInvestInfo>
                </div>

                <div class="panel-body" v-show="UserAllInfo&&info.UT_Name=='普通用户'">
                    <UserInfo></UserInfo>
                </div>

                <div class="panel-body" v-show="UserInvest&&info.UT_Name=='管理员'">
                    <ShowAdminInvestInfo></ShowAdminInvestInfo>
                </div>
            </div>
        </div>
    </div>
</div>
<!--BEGIN FOOT-->
<div class="pure-g copyright">
    <div class="pure-u-1"> 2013 © ZJY. </div>
</div>

</div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import {ref,onMounted} from 'vue';
import axios from 'axios';
import ShowInvestInfo from './Invests/ShowInvestInfo.vue'
import ShowUserInvestInfo from './Invests/ShowUserInvestInfo.vue'
import ShowAdminInvestInfo from './Invests/ShowAdminInvestInfo.vue'
import UserInfo from './Users/UserInfo.vue';

const route=useRoute();

//创建响应式数据
const info=ref({
    UL_Name:"",
    UT_Name:""
})

onMounted(()=>{
    LoadData()
})

const LoadData=()=>{
    axios.get("https://localhost:44321/api/Users/GetUserNameType",
        {
            params:{
                Uid:route.params.Uid
            }
        }
    )
    .then(res=>{
        info.value=res.data[0]
    })
}

//根据所选参数完成数据加载
const InvestManage=ref(false);
const UserInvest=ref(false);
const UserAllInfo=ref(false);

const ManageChoose=(choose:string)=>{
    switch(choose)
    {
        case 'PM':
        InvestManage.value=true
        UserInvest.value=false
        UserAllInfo.value=false
        break;

        case 'IM':
        UserInvest.value=true
        InvestManage.value=false
        UserAllInfo.value=false
        break;

        case 'UM':
        UserAllInfo.value=true
        UserInvest.value=false
        InvestManage.value=false
        break;
    }
}

</script>
